<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片上传与下载</title>
</head>
<body>
<form id="myformList">
    <input type="text" id="userName">
    <input type="text" id="pwd">
    <input type="text" id="adminName">
    <input type="file" id="myinput">
    <button type="button" id="uploadFile">上传</button>
</form>

<div id="yulan"></div>
<div id="addsuccess">

</div>

<a href="/download">xiazai</a>

<form id="listFile">
    <input type="file" multiple name="myList" id="myinputList">
    <button type="button" id="uploadFileList">上传</button>
</form>
<form action="/uploadListTongbu" method="post">
    <input type="file" multiple name="myList" id="myinputList1">
    <button>上传</button>
</form>

<script src="js/jquery-1.11.3.js"></script>
<script>
    $('#myinput').change(function () {
        // 获取选中的img的url
        // 创建img节点
        // 将节点.src = 选中的url
        // 节点添到某个div里面去
        let imgFile = this.files[0]
        let reader = new FileReader()
        reader.readAsDataURL(imgFile)
        reader.onload = function () {
            let src = this.result
            let imgNode = document.createElement('img')
            imgNode.src = src
            imgNode.style.width = '100px'
            $('#yulan').append(imgNode)
        }
    })

    $('#uploadFile').click(function () {
        let file = $('#myinput')[0].files[0]
        // 通过form节点得到下面所有input的值
        let data = new FormData()  /*创建formdata*/
        // 将文件 装进fromdata里面
        data.append('myname',file)
        let userName = $('#userName').val()
        let pwd = $('#pwd').val()
        let adminName = $('#adminName').val()
        data.append('userName',userName)
        data.append('pwd',pwd)
        data.append('adminName',adminName)
        // 将这个formdata 上传到服务器
        // if(2*1024>file.size){
        //     ajax()
        // }else {
        //     alert('图片过大')
        // }
        $.ajax({
            url:'/uploadFile',
            method:'post',
            data,
            contentType:false,/*注意 需要值为false才能自动添加正确的contentType*/
            processData:false,/*避开jq对formData的处理*/
            success(data){
                let obj = data[0]
                $('#addsuccess').html(`
                    <p>账号:${obj.u_user}</p>
                    <p>密码:${obj.u_pwd}</p>
                    <p>姓名:${obj.u_name}</p>
                    <img src="${obj.u_imgSrc}"/>
                `)
            }
        })
    })
    /*
    * 请求地址
    * 请求参数   1.myname   2 userName
    *
    * 响应参数   code   msg
    * */
    /*==================多文件*/
    $('#uploadFileList').click(function () {
        let data = new FormData($("#listFile")[0])
        $.ajax({
            url:'/uploadList',
            method: 'post',
            contentType: false,
            processData: false,
            data,
            success(data) {
                console.log('上传成功')
            }
        })
    })
</script>
</body>
</html>